<template>
  <div class="about">
    <el-page-header @back="$router.push({path:'/manageabout'})" content="新增教室"></el-page-header>

    <!-- <el-page-header @back="$router.go(-1)" content="新增教室"></el-page-header> -->

    <header>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-Classroom">
        <el-form-item label="教室名称：" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="教室座位数：" prop="seat">
          <el-input v-model="form.seat"></el-input>
        </el-form-item>

        <el-form-item label="教学楼名称：" prop="buildingname">{{form.buildingname}}</el-form-item>

        <el-form-item label="楼层：" prop="floor">
          <el-input v-model="form.floor"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain class="btn" @click="search()">确定</el-button>
    </header>
  </div>
</template>


<script>
import bus from "../plugins/bus";

export default {
  data() {
    return {
      form: {
        name: "",
        seat: "",
        buildingname: "",
        floor: "",
      },

      rules: {
        name: [
          { required: true, message: "必输项不能为空！", trigger: "blur" },
        ],
        seat: [
          { required: true, message: "必输项不能为空！", trigger: "blur" },
        ],
        buildingname: [
          { required: true, message: "必输项不能为空！", trigger: "blur" },
        ],
        floor: [
          { required: true, message: "必输项不能为空！", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    console.log(this.$route.params.data.name);
    this.form.buildingname = this.$route.params.data.name;
  },

  methods: {
    // 查询
    search() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/api/classroomAdd",
            method: "post",
            data: {
              name: this.form.name,
              seat: this.form.seat,
              buildingId: String(this.$route.params.data.id),
              storeyId: this.form.floor,
            },
          }).then((res) => {
            if (res._RejCode === "00000000") {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.$refs.form.resetFields();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style  scoped>
header {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn {
  width: 40%;
}
</style>
